<?php
/* @var $this yii\web\View */
use \yii\helpers\HtmlPurifier;
use yii\helpers\Url;
$this->title='speaking';
// $this->registerJSFile('@web/js/speaking.js',['depends'=>['app\assets\AppAsset']]);
$this->registerJSFile('@web/js/savenote.js',['depends'=>['app\assets\AppAsset']]);
$this->registerCssFile('@web/css/note.css',['depends'=>['app\assets\AppAsset']]);

?>
<form action="?r=speaking/<?=$action;?>" id="nextque" method="post">
    <input type="hidden" name="page" value="<?=$page;?>">
    <input name="_csrf" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
    <input name="usercheck" type="hidden" value="">
    <input type="hidden" name="post_type" value="">
</form>
<script>
    var lasttime=null;          //  待打印
    <?php
        if($speak_content['type']==1)
    {
    ?>
    lasttime=15;
    <?php
    }
        elseif($speak_content['type']==2)
    {
    ?>
    lasttime=20;
    <?php
    } elseif($speak_content['type']==3){ ?>
    lasttime=30;
    <?php } ?>
    window.onload = function () {
        <?php
        $session=Yii::$app->session;
        $session->open();
        $session['form']=3;
        ?>
        var $submit_time=$("[name=post_type]").clone(true).attr("name","time");
        $submit_time.appendTo("#nextque");
        var t=0;
        //计时
        $.ajax({
            url: "?r=ajax/gettime&state=<?=$state;?>&token=<?=$token;?>",
            dataType: 'json',
            type: 'get',
            success: function (data) {
                var $time=$("i.fa-clock-o");
                var sec=data.time;          //初始时间，以秒为单位
                setInterval(
                    function(){
                        sec++;
                        t++;
                        $time.html(secToMin(sec));
                        $submit_time.val(t);
                    },1000);
            }
        });

        //      倒计时页面新的js
        var blanktime=6;             //blank
        var sectime=4;               //   第二声bi后面剩余的时间
        var remaintime=lasttime;              //倒计时总共几秒
        var $audio=$("audio");
        var endtime=$audio[0].duration;
        var showtime=endtime-blanktime;           
        var time=0;
        $audio[0].play();
        $("#counttime").text(remaintime+'');
        var times=setInterval(function(){
             time=$audio[0].currentTime;
            if (time>=showtime) {
                //开始倒计时,到0停止
                 $audio[0].pause();
                clearInterval(times);
                var countTime=setInterval(function(){
                    var count=parseInt($("#counttime").text());
                    count--;
                    if (count<10) {
                        count='0'+count;
                    }
                    $("#counttime").text(count);
                    if (count==0) {
                        clearInterval(countTime);
                         $audio[0].currentTime=endtime-sectime;
                         $audio[0].play();
//                        $("#nextque").submit();
                    }
                },1000);
            }
        },50)
        var ended=setInterval(function(){
            if ($audio[0].ended) {
                $("#nextque").submit();
            }
        },500);
    };
</script>
<div class="container">
    <div class="leadx row clearfix">
        <div class="col-xs-3 pull-left">
            <span>
                Part
                <?=$speak_content['question_number'];
                ?>
                speaking
                Passage
                <?=$page-1;?>
                of
                <?=$speak_content['hear_number'];?>
            </span>
        </div>
        <div class="col-xs-1 pull-left notebook">
            <a href="#"><span><i class="fa fa-pencil-square-o"></i> 笔记</span></a>
        </div>
        <div class="col-xs-1 pull-right">
            <span><i class="fa fa-clock-o"></i></span>
        </div>
    </div>
    <div class="speak-wrap">
        <div class="speak-info row">
            Question
            <?=$speak_content['question_number']?>
            of
            6
        </div>
        <div class="p-que"><p class="que"><?=$speak_content['topic_content_english'];?></p>
        </div>
        <hr>
        <div class="pare-text">
            <span>Prepare your response</span>
        </div>
        <div class="count-down">
            ······<span>00:</span><span id="counttime">00</span>······
        </div>
    </div>
    <audio src="<?= $speak_content['topic_content']; ?>" autoplay="autoplay"></audio>
</div>
<div class="addnote">
    <div class="note-lead">
        <span id="note-word">笔记</span>
        <span class="close"><i class="fa fa-times"></i></span>
    </div>
    <div class="note-text">
        <div contenteditable="true" id="note-self"><?=HtmlPurifier::process($my_note['note']);?></div>
    </div>
    <form action="#" id="note-form">
        <button type="button" name="note-save" id="note-submit">Save and Close</button>
        <input type="hidden" name="saved-note" value="">
    </form>
</div>
